<html>
    <head>
        <title>Examples</title>
        <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

        <!-- if using map, including your own google map api key and the following libraries-->
        <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAXs6fffdzf-Y3421qG3pbLhSYJ1Ji2XwFrjQNj8NEcWgikurwwxSksjfcPju0lN1KIGovWSqRRGRbjQ"></script>
        <script>
            google.load("maps", "2.x");
        </script>
        <script src="../../src/gmaps-utility-library/labeledmarker/src/labeledmarker.js" type="text/javascript"></script>

        <!-- web.willflow js -->
        <link rel="stylesheet" href="../../src/wf-iphone/iphone.css" />
        <script type="text/javascript" src="../../src/mootools/mootools-core.js"></script>
        <script type="text/javascript" src="../../src/wf-iphone/iphone.js"></script>
    </head>
	
	<!-- main content here -->
    <body>
    	<!-- fullscreen table -->
        <table wf_style="fullscreen" title="Full Example">
			<tr>
				<td wf_style="padding">
					<a href="tab.html" wf_style="navigation_reset">Restaurant guide</a>
				</td>
			</tr>
		</table>			
        <table wf_style="fullscreen" title="Table">
			<tr>
				<td wf_style="padding">
					<a href="table_fullscreen.html">Fullscreen Table</a>
				</td>
			</tr>
			<tr>
				<td wf_style="padding">
					<a href="restaurant_1.html">Transparent Table</a>
				</td>
			</tr>
			<tr>
				<td wf_style="padding">
					<a href="restaurant_1.html">Normal Table</a>
				</td>
			</tr>
        </table>            
        <table wf_style="fullscreen" title="Button">
            <tr>
                <td wf_style="padding">
                    <a href="button.html">Link Buttons</a>
                </td>
            </tr>
            <tr>
                <td wf_style="padding">
                    <a href="button_in_table.html">Buttons in table</a>
                </td>
            </tr>
            <tr>
                <td wf_style="padding">
                    <a href="disabled_button.html">Disabled Buttons</a>
                </td>
            </tr>
        </table>            
        <table wf_style="fullscreen" title="Header/Footer">
            <tr>
                <td wf_style="padding">
                    <a href="table_fullscreen.html">Header sample</a>
                </td>
            </tr>
            <tr>
                <td wf_style="padding">
                    <a href="table_fullscreen.html">Footer sample</a>
                </td>
            </tr>
        </table>            
        <table wf_style="fullscreen" title="Tab">
			<tr>
				<td wf_style="padding">
					<a href="tab.html" wf_style="navigation_reset">Tabs sample</a>
				</td>
			</tr>
        </table>            
        <table wf_style="fullscreen" title="Toolbar">
			<tr>
				<td wf_style="padding">
					<a href="restaurant_1.html">1 Button</a>
				</td>
			</tr>
			<tr>
				<td wf_style="padding">
					<a href="restaurant_2.html">2 Buttons</a>
				</td>
			</tr>
            <tr>
                <td wf_style="padding">
                    <a href="toolbar_image_a.html">toolbar image with a link 1</a>
                </td>
            </tr>
            <tr>
                <td wf_style="padding">
                    <a href="toolbar_image_a_2.html">toolbar image with a link 2</a>
                </td>
            </tr>
            <tr>
                <td wf_style="padding">
                    <a href="toolbar_image_submit.html">toolbar image with submit input</a>
                </td>
            </tr>
        </table>            
        <table wf_style="fullscreen" title="Popup overlay">
			<tr>
				<td wf_style="padding">
					<a href="map.html">center/bottom popup sample</a>
				</td>
			</tr>
        </table>            
        <table wf_style="fullscreen" title="Popup select box">
            <tr>
                <td wf_style="padding">
                    <a href="table_fullscreen.html">Poup select box sample</a>
                </td>
            </tr>
        </table>            
        <table wf_style="fullscreen" title="Map">
			<tr>
				<td wf_style="padding">
					<a href="map.html">Map sample</a>
				</td>
			</tr>
            <tr>
                <td wf_style="padding">
                	<!-- link with [wf:gps], iPhone client would replace the current location -->
                    <a href="map.html?[wf:gps]">GPS (href with [wf:gps])</a>
                </td>
            </tr>
        </table>            
        <table wf_style="fullscreen" title="iPhone Picker/Segment">
			<tr>
				<td wf_style="padding">
					<a href="picker.html">iPhone Picker</a>
				</td>
			</tr>
            <tr>
                <td wf_style="padding">
                    <a href="segment.html">iPhone Segment</a>
                </td>
            </tr>
        </table>            
        <table wf_style="fullscreen" title="iFrame">
            <tr>
                <td wf_style="padding">
                    <a href="iframe.html">iframe used as footer</a>
                </td>
            </tr>
        </table>
    </body>
	<script>
		window.addEvent("load", function() {
			WF.initIPhone();
		});
	</script>
	<link type="text/css" rel="stylesheet" href="../../src/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
	<script language="javascript" src="../../src/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
	<script language="javascript" src="../../src/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
</html>
